<template>
  <div id="app">
    app...
    {{count}}
    <ul>
      {{list}}
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <hr/>
    <input type="text" placeholder="请输入数据" @keyup.enter="keyUpHandle" v-model="text">
    <button @click="addDelay">新增</button>
    <router-view/>
  </div>
</template>
<script>
// mapState 把vuex中的state数据隐射到组件的计算属性
// mapMutations 把vuex的mutations映射到methods中
// mapActions 把vuex中的actions映射到methods中
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      text: ''
    }
  },
  computed: {
    ...mapState(['count']),
    // 第一个参数是命名空间
    ...mapState('product', ['list'])
  },
  methods: {
    ...mapMutations('product', ['add']),
    ...mapActions('product', ['addAsync']),
    keyUpHandle (e) {
      if (e) {
        this.add(e.currentTarget.value)
      }
    },
    addDelay () {
      this.addAsync(this.text)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
